iNextrix /
ASTPP
| Conditions | 16 |
| Paths | > 20000 |
| Total Lines | 504 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like $.fn.galleriffic often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | /* |
||
| 176 | $.fn.galleriffic = function(thumbsContainerSel, settings) {
|
||
| 177 | // Extend Gallery Object |
||
| 178 | $.extend(this, {
|
||
| 179 | ver: function() {
|
||
| 180 | return ver; |
||
| 181 | }, |
||
| 182 | |||
| 183 | initializeThumbs: function() {
|
||
| 184 | this.data = []; |
||
| 185 | var gallery = this; |
||
| 186 | |||
| 187 | this.$thumbsContainer.find('ul.thumbs > li').each(function(i) {
|
||
| 188 | var $li = $(this); |
||
| 189 | var $aThumb = $li.find('a.thumb');
|
||
| 190 | var hash = gallery.offset+i; |
||
| 191 | |||
| 192 | gallery.data.push({
|
||
| 193 | title:$aThumb.attr('title'),
|
||
| 194 | slideUrl:$aThumb.attr('href'),
|
||
| 195 | caption:$li.find('.caption').remove(),
|
||
| 196 | hash:hash |
||
| 197 | }); |
||
| 198 | |||
| 199 | // Setup history |
||
| 200 | $aThumb.attr('rel', 'history');
|
||
| 201 | $aThumb.attr('href', '#'+hash);
|
||
| 202 | $aThumb.click(function(e) {
|
||
| 203 | clickHandler(e, gallery, this); |
||
| 204 | }); |
||
| 205 | }); |
||
| 206 | return this; |
||
| 207 | }, |
||
| 208 | |||
| 209 | isPreloadComplete: false, |
||
| 210 | |||
| 211 | preloadInit: function() {
|
||
| 212 | if (this.settings.preloadAhead == 0) return this; |
||
| 213 | |||
| 214 | this.preloadStartIndex = this.currentIndex; |
||
| 215 | var nextIndex = this.getNextIndex(this.preloadStartIndex); |
||
| 216 | return this.preloadRecursive(this.preloadStartIndex, nextIndex); |
||
| 217 | }, |
||
| 218 | |||
| 219 | preloadRelocate: function(index) {
|
||
| 220 | // By changing this startIndex, the current preload script will restart |
||
| 221 | this.preloadStartIndex = index; |
||
| 222 | return this; |
||
| 223 | }, |
||
| 224 | |||
| 225 | preloadRecursive: function(startIndex, currentIndex) {
|
||
| 226 | // Check if startIndex has been relocated |
||
| 227 | if (startIndex != this.preloadStartIndex) {
|
||
| 228 | var nextIndex = this.getNextIndex(this.preloadStartIndex); |
||
| 229 | return this.preloadRecursive(this.preloadStartIndex, nextIndex); |
||
| 230 | } |
||
| 231 | |||
| 232 | var gallery = this; |
||
| 233 | |||
| 234 | // Now check for preloadAhead count |
||
| 235 | var preloadCount = currentIndex - startIndex; |
||
| 236 | if (preloadCount < 0) |
||
| 237 | preloadCount = this.data.length-1-startIndex+currentIndex; |
||
| 238 | if (this.settings.preloadAhead >= 0 && preloadCount > this.settings.preloadAhead) {
|
||
| 239 | // Do this in order to keep checking for relocated start index |
||
| 240 | setTimeout(function() { gallery.preloadRecursive(startIndex, currentIndex); }, 500);
|
||
| 241 | return this; |
||
| 242 | } |
||
| 243 | |||
| 244 | var imageData = this.data[currentIndex]; |
||
| 245 | if (!imageData) |
||
| 246 | return this; |
||
| 247 | |||
| 248 | // If already loaded, continue |
||
| 249 | if (imageData.image) |
||
| 250 | return this.preloadNext(startIndex, currentIndex); |
||
| 251 | |||
| 252 | // Preload the image |
||
| 253 | var image = new Image(); |
||
| 254 | |||
| 255 | image.onload = function() {
|
||
| 256 | imageData.image = this; |
||
| 257 | gallery.preloadNext(startIndex, currentIndex); |
||
| 258 | }; |
||
| 259 | |||
| 260 | image.alt = imageData.title; |
||
| 261 | image.src = imageData.slideUrl; |
||
| 262 | |||
| 263 | return this; |
||
| 264 | }, |
||
| 265 | |||
| 266 | preloadNext: function(startIndex, currentIndex) {
|
||
| 267 | var nextIndex = this.getNextIndex(currentIndex); |
||
| 268 | if (nextIndex == startIndex) {
|
||
| 269 | this.isPreloadComplete = true; |
||
| 270 | } else {
|
||
| 271 | // Use set timeout to free up thread |
||
| 272 | var gallery = this; |
||
| 273 | setTimeout(function() { gallery.preloadRecursive(startIndex, nextIndex); }, 100);
|
||
| 274 | } |
||
| 275 | return this; |
||
| 276 | }, |
||
| 277 | |||
| 278 | getNextIndex: function(index) {
|
||
| 279 | var nextIndex = index+1; |
||
| 280 | if (nextIndex >= this.data.length) |
||
| 281 | nextIndex = 0; |
||
| 282 | return nextIndex; |
||
| 283 | }, |
||
| 284 | |||
| 285 | getPrevIndex: function(index) {
|
||
| 286 | var prevIndex = index-1; |
||
| 287 | if (prevIndex < 0) |
||
| 288 | prevIndex = this.data.length-1; |
||
| 289 | return prevIndex; |
||
| 290 | }, |
||
| 291 | |||
| 292 | pause: function() {
|
||
| 293 | if (this.interval) |
||
| 294 | this.toggleSlideshow(); |
||
| 295 | |||
| 296 | return this; |
||
| 297 | }, |
||
| 298 | |||
| 299 | play: function() {
|
||
| 300 | if (!this.interval) |
||
| 301 | this.toggleSlideshow(); |
||
| 302 | |||
| 303 | return this; |
||
| 304 | }, |
||
| 305 | |||
| 306 | toggleSlideshow: function() {
|
||
| 307 | if (this.interval) {
|
||
| 308 | clearInterval(this.interval); |
||
| 309 | this.interval = 0; |
||
| 310 | |||
| 311 | if (this.$controlsContainer) {
|
||
| 312 | this.$controlsContainer |
||
| 313 | .find('div.ss-controls a').removeClass().addClass('play')
|
||
| 314 | .attr('title', this.settings.playLinkText)
|
||
| 315 | .attr('href', '#play')
|
||
| 316 | .html(this.settings.playLinkText); |
||
| 317 | } |
||
| 318 | } else {
|
||
| 319 | this.ssAdvance(); |
||
| 320 | |||
| 321 | var gallery = this; |
||
| 322 | this.interval = setInterval(function() {
|
||
| 323 | gallery.ssAdvance(); |
||
| 324 | }, this.settings.delay); |
||
| 325 | |||
| 326 | if (this.$controlsContainer) {
|
||
| 327 | this.$controlsContainer |
||
| 328 | .find('div.ss-controls a').removeClass().addClass('pause')
|
||
| 329 | .attr('title', this.settings.pauseLinkText)
|
||
| 330 | .attr('href', '#pause')
|
||
| 331 | .html(this.settings.pauseLinkText); |
||
| 332 | } |
||
| 333 | } |
||
| 334 | |||
| 335 | return this; |
||
| 336 | }, |
||
| 337 | |||
| 338 | ssAdvance: function() {
|
||
| 339 | var nextIndex = this.getNextIndex(this.currentIndex); |
||
| 340 | var nextHash = this.data[nextIndex].hash; |
||
| 341 | |||
| 342 | // Seems to be working on both FF and Safari |
||
| 343 | if (this.settings.enableHistory) |
||
| 344 | location.href = '#'+nextHash; |
||
| 345 | else |
||
| 346 | this.goto(nextIndex); |
||
| 347 | |||
| 348 | // IE we need to explicity call goto |
||
| 349 | //if ($.browser.msie) {
|
||
| 350 | // this.goto(nextIndex); |
||
| 351 | //} |
||
| 352 | |||
| 353 | return this; |
||
| 354 | }, |
||
| 355 | |||
| 356 | goto: function(index) {
|
||
| 357 | if (index < 0) index = 0; |
||
| 358 | else if (index >= this.data.length) index = this.data.length-1; |
||
| 359 | |||
| 360 | if (this.settings.onChange) |
||
| 361 | this.settings.onChange(this.currentIndex, index); |
||
| 362 | |||
| 363 | this.currentIndex = index; |
||
| 364 | this.preloadRelocate(index); |
||
| 365 | return this.refresh(); |
||
| 366 | }, |
||
| 367 | |||
| 368 | refresh: function() {
|
||
| 369 | var imageData = this.data[this.currentIndex]; |
||
| 370 | if (!imageData) |
||
| 371 | return this; |
||
| 372 | |||
| 373 | // Flag we are transitioning |
||
| 374 | var isTransitioning = true; |
||
| 375 | |||
| 376 | var gallery = this; |
||
| 377 | |||
| 378 | var transitionOutCallback = function() {
|
||
| 379 | // Flag that the transition has completed |
||
| 380 | isTransitioning = false; |
||
| 381 | |||
| 382 | // Update Controls |
||
| 383 | if (gallery.$controlsContainer) {
|
||
| 384 | gallery.$controlsContainer |
||
| 385 | .find('div.nav-controls a.prev').attr('href', '#'+gallery.data[gallery.getPrevIndex(gallery.currentIndex)].hash).end()
|
||
| 386 | .find('div.nav-controls a.next').attr('href', '#'+gallery.data[gallery.getNextIndex(gallery.currentIndex)].hash);
|
||
| 387 | } |
||
| 388 | |||
| 389 | var imageData = gallery.data[gallery.currentIndex]; |
||
| 390 | |||
| 391 | // Replace Caption |
||
| 392 | if (gallery.$captionContainer) {
|
||
| 393 | gallery.$captionContainer.empty().append(imageData.caption); |
||
| 394 | } |
||
| 395 | |||
| 396 | if (imageData.image) {
|
||
| 397 | gallery.buildImage(imageData.image); |
||
| 398 | } else {
|
||
| 399 | // Show loading container |
||
| 400 | if (gallery.$loadingContainer) {
|
||
| 401 | gallery.$loadingContainer.show(); |
||
| 402 | } |
||
| 403 | } |
||
| 404 | } |
||
| 405 | |||
| 406 | if (this.settings.onTransitionOut) {
|
||
| 407 | this.settings.onTransitionOut(transitionOutCallback); |
||
| 408 | } else {
|
||
| 409 | this.$transitionContainers.hide(); |
||
| 410 | transitionOutCallback(); |
||
| 411 | } |
||
| 412 | |||
| 413 | if (!imageData.image) {
|
||
| 414 | var image = new Image(); |
||
| 415 | |||
| 416 | // Wire up mainImage onload event |
||
| 417 | image.onload = function() {
|
||
| 418 | imageData.image = this; |
||
| 419 | |||
| 420 | if (!isTransitioning) {
|
||
| 421 | gallery.buildImage(imageData.image); |
||
| 422 | } |
||
| 423 | }; |
||
| 424 | |||
| 425 | // set alt and src |
||
| 426 | image.alt = imageData.title; |
||
| 427 | image.src = imageData.slideUrl; |
||
| 428 | } |
||
| 429 | |||
| 430 | // This causes the preloader (if still running) to relocate out from the currentIndex |
||
| 431 | this.relocatePreload = true; |
||
| 432 | |||
| 433 | return this.syncThumbs(); |
||
| 434 | }, |
||
| 435 | |||
| 436 | buildImage: function(image) {
|
||
| 437 | if (this.$imageContainer) {
|
||
| 438 | this.$imageContainer.empty(); |
||
| 439 | |||
| 440 | var gallery = this; |
||
| 441 | var nextIndex = this.getNextIndex(this.currentIndex); |
||
| 442 | |||
| 443 | // Hide the loading conatiner |
||
| 444 | if (this.$loadingContainer) {
|
||
| 445 | this.$loadingContainer.hide(); |
||
| 446 | } |
||
| 447 | |||
| 448 | // Setup image |
||
| 449 | this.$imageContainer |
||
| 450 | .append('<span class="image-wrapper"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+image.alt+'"></a></span>')
|
||
| 451 | .find('a')
|
||
| 452 | .append(image) |
||
| 453 | .click(function(e) {
|
||
| 454 | clickHandler(e, gallery, this); |
||
| 455 | }); |
||
| 456 | } |
||
| 457 | |||
| 458 | if (this.settings.onTransitionIn) |
||
| 459 | this.settings.onTransitionIn(); |
||
| 460 | else |
||
| 461 | this.$transitionContainers.show(); |
||
| 462 | |||
| 463 | return this; |
||
| 464 | }, |
||
| 465 | |||
| 466 | syncThumbs: function() {
|
||
| 467 | if (this.$thumbsContainer) {
|
||
| 468 | var page = Math.floor(this.currentIndex / this.settings.numThumbs); |
||
| 469 | if (page != this.currentPage) {
|
||
| 470 | this.currentPage = page; |
||
| 471 | this.updateThumbs(); |
||
| 472 | } |
||
| 473 | |||
| 474 | // Remove existing selected class and add selected class to new thumb |
||
| 475 | var $thumbs = this.$thumbsContainer.find('ul.thumbs').children();
|
||
| 476 | $thumbs.filter('.selected').removeClass('selected');
|
||
| 477 | $thumbs.eq(this.currentIndex).addClass('selected');
|
||
| 478 | } |
||
| 479 | |||
| 480 | return this; |
||
| 481 | }, |
||
| 482 | |||
| 483 | updateThumbs: function() {
|
||
| 484 | var gallery = this; |
||
| 485 | var transitionOutCallback = function() {
|
||
| 486 | gallery.rebuildThumbs(); |
||
| 487 | |||
| 488 | // Transition In the thumbsContainer |
||
| 489 | if (gallery.settings.onPageTransitionIn) |
||
| 490 | gallery.settings.onPageTransitionIn(); |
||
| 491 | else |
||
| 492 | gallery.$thumbsContainer.show(); |
||
| 493 | }; |
||
| 494 | |||
| 495 | // Transition Out the thumbsContainer |
||
| 496 | if (this.settings.onPageTransitionOut) {
|
||
| 497 | this.settings.onPageTransitionOut(transitionOutCallback); |
||
| 498 | } else {
|
||
| 499 | this.$thumbsContainer.hide(); |
||
| 500 | transitionOutCallback(); |
||
| 501 | } |
||
| 502 | |||
| 503 | return this; |
||
| 504 | }, |
||
| 505 | |||
| 506 | rebuildThumbs: function() {
|
||
| 507 | // Initialize currentPage to first page |
||
| 508 | if (this.currentPage < 0) |
||
| 509 | this.currentPage = 0; |
||
| 510 | |||
| 511 | var needsPagination = this.data.length > this.settings.numThumbs; |
||
| 512 | |||
| 513 | // Rebuild top pager |
||
| 514 | var $topPager = this.$thumbsContainer.find('div.top');
|
||
| 515 | if ($topPager.length == 0) |
||
| 516 | $topPager = this.$thumbsContainer.prepend('<div class="top pagination"></div>').find('div.top');
|
||
| 517 | |||
| 518 | if (needsPagination && this.settings.enableTopPager) {
|
||
| 519 | $topPager.empty(); |
||
| 520 | this.buildPager($topPager); |
||
| 521 | } |
||
| 522 | |||
| 523 | // Rebuild bottom pager |
||
| 524 | if (needsPagination && this.settings.enableBottomPager) {
|
||
| 525 | var $bottomPager = this.$thumbsContainer.find('div.bottom');
|
||
| 526 | if ($bottomPager.length == 0) |
||
| 527 | $bottomPager = this.$thumbsContainer.append('<div class="bottom pagination"></div>').find('div.bottom');
|
||
| 528 | else |
||
| 529 | $bottomPager.empty(); |
||
| 530 | |||
| 531 | this.buildPager($bottomPager); |
||
| 532 | } |
||
| 533 | |||
| 534 | var startIndex = this.currentPage*this.settings.numThumbs; |
||
| 535 | var stopIndex = startIndex+this.settings.numThumbs-1; |
||
| 536 | if (stopIndex >= this.data.length) |
||
| 537 | stopIndex = this.data.length-1; |
||
| 538 | |||
| 539 | // Show/Hide thumbs |
||
| 540 | var $thumbsUl = this.$thumbsContainer.find('ul.thumbs');
|
||
| 541 | $thumbsUl.find('li').each(function(i) {
|
||
| 542 | var $li = $(this); |
||
| 543 | if (i >= startIndex && i <= stopIndex) {
|
||
| 544 | $li.show(); |
||
| 545 | } else {
|
||
| 546 | $li.hide(); |
||
| 547 | } |
||
| 548 | }); |
||
| 549 | |||
| 550 | // Remove the noscript class from the thumbs container ul |
||
| 551 | $thumbsUl.removeClass('noscript');
|
||
| 552 | |||
| 553 | return this; |
||
| 554 | }, |
||
| 555 | |||
| 556 | buildPager: function(pager) {
|
||
| 557 | var gallery = this; |
||
| 558 | var startIndex = this.currentPage*this.settings.numThumbs; |
||
| 559 | |||
| 560 | // Prev Page Link |
||
| 561 | if (this.currentPage > 0) {
|
||
| 562 | var prevPage = startIndex - this.settings.numThumbs; |
||
| 563 | pager.append('<a rel="history" href="#'+this.data[prevPage].hash+'" title="'+this.settings.prevPageLinkText+'">'+this.settings.prevPageLinkText+'</a>');
|
||
| 564 | } |
||
| 565 | |||
| 566 | // Page Index Links |
||
| 567 | for (i=this.currentPage-3; i<=this.currentPage+3; i++) {
|
||
| 568 | var pageNum = i+1; |
||
| 569 | |||
| 570 | if (i == this.currentPage) |
||
| 571 | pager.append('<span class="current">'+pageNum+'</span>');
|
||
| 572 | else if (i>=0 && i<this.numPages) {
|
||
| 573 | var imageIndex = i*this.settings.numThumbs; |
||
| 574 | pager.append('<a rel="history" href="#'+this.data[imageIndex].hash+'" title="'+pageNum+'">'+pageNum+'</a>');
|
||
| 575 | } |
||
| 576 | } |
||
| 577 | |||
| 578 | // Next Page Link |
||
| 579 | var nextPage = startIndex+this.settings.numThumbs; |
||
| 580 | if (nextPage < this.data.length) {
|
||
| 581 | pager.append('<a rel="history" href="#'+this.data[nextPage].hash+'" title="'+this.settings.nextPageLinkText+'">'+this.settings.nextPageLinkText+'</a>');
|
||
| 582 | } |
||
| 583 | |||
| 584 | pager.find('a').click(function(e) {
|
||
| 585 | clickHandler(e, gallery, this); |
||
| 586 | }); |
||
| 587 | |||
| 588 | return this; |
||
| 589 | } |
||
| 590 | }); |
||
| 591 | |||
| 592 | // Now initialize the gallery |
||
| 593 | this.settings = $.extend({}, defaults, settings);
|
||
| 594 | //enableHistory = this.settings.enableHistory; // Ghismo |
||
| 595 | |||
| 596 | if (this.interval) |
||
| 597 | clearInterval(this.interval); |
||
| 598 | |||
| 599 | this.interval = 0; |
||
| 600 | |||
| 601 | if (this.settings.imageContainerSel) this.$imageContainer = $(this.settings.imageContainerSel); |
||
| 602 | if (this.settings.captionContainerSel) this.$captionContainer = $(this.settings.captionContainerSel); |
||
| 603 | if (this.settings.loadingContainerSel) this.$loadingContainer = $(this.settings.loadingContainerSel); |
||
| 604 | |||
| 605 | // Setup the jQuery object holding each container that will be transitioned |
||
| 606 | this.$transitionContainers = $([]); |
||
| 607 | if (this.$imageContainer) |
||
| 608 | this.$transitionContainers = this.$transitionContainers.add(this.$imageContainer); |
||
| 609 | if (this.$captionContainer) |
||
| 610 | this.$transitionContainers = this.$transitionContainers.add(this.$captionContainer); |
||
| 611 | |||
| 612 | // Set the hash index offset for this gallery |
||
| 613 | this.offset = galleryOffset; |
||
| 614 | |||
| 615 | this.$thumbsContainer = $(thumbsContainerSel); |
||
| 616 | this.initializeThumbs(); |
||
| 617 | |||
| 618 | // Add this gallery to the global galleries array |
||
| 619 | registerGallery(this); |
||
| 620 | |||
| 621 | this.numPages = Math.ceil(this.data.length/this.settings.numThumbs); |
||
| 622 | this.currentPage = -1; |
||
| 623 | this.currentIndex = 0; |
||
| 624 | var gallery = this; |
||
| 625 | |||
| 626 | // Hide the loadingContainer |
||
| 627 | if (this.$loadingContainer) |
||
| 628 | this.$loadingContainer.hide(); |
||
| 629 | |||
| 630 | // Setup controls |
||
| 631 | if (this.settings.controlsContainerSel) {
|
||
| 632 | this.$controlsContainer = $(this.settings.controlsContainerSel).empty(); |
||
| 633 | |||
| 634 | if (this.settings.renderSSControls) {
|
||
| 635 | if (this.settings.autoStart) {
|
||
| 636 | this.$controlsContainer |
||
| 637 | .append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.settings.pauseLinkText+'">'+this.settings.pauseLinkText+'</a></div>');
|
||
| 638 | } else {
|
||
| 639 | this.$controlsContainer |
||
| 640 | .append('<div class="ss-controls"><a href="#play" class="play" title="'+this.settings.playLinkText+'">'+this.settings.playLinkText+'</a></div>');
|
||
| 641 | } |
||
| 642 | |||
| 643 | this.$controlsContainer.find('div.ss-controls a')
|
||
| 644 | .click(function(e) {
|
||
| 645 | gallery.toggleSlideshow(); |
||
| 646 | e.preventDefault(); |
||
| 647 | return false; |
||
| 648 | }); |
||
| 649 | } |
||
| 650 | |||
| 651 | if (this.settings.renderNavControls) {
|
||
| 652 | var $navControls = this.$controlsContainer |
||
| 653 | .append('<div class="nav-controls"><a class="prev" rel="history" title="'+this.settings.prevLinkText+'">'+this.settings.prevLinkText+'</a><a class="next" rel="history" title="'+this.settings.nextLinkText+'">'+this.settings.nextLinkText+'</a></div>')
|
||
| 654 | .find('div.nav-controls a')
|
||
| 655 | .click(function(e) {
|
||
| 656 | clickHandler(e, gallery, this); |
||
| 657 | }); |
||
| 658 | } |
||
| 659 | } |
||
| 660 | |||
| 661 | // Initialize history only once when the first gallery on the page is initialized |
||
| 662 | historyInit(); |
||
| 663 | |||
| 664 | // Build image |
||
| 665 | var hash = getHash(); |
||
| 666 | var hashGallery = (hash >= 0) ? getGallery(hash) : 0; |
||
| 667 | var gotoIndex = (hashGallery && this == hashGallery) ? (hash-this.offset) : 0; |
||
| 668 | this.goto(gotoIndex); |
||
| 669 | |||
| 670 | if (this.settings.autoStart) {
|
||
| 671 | |||
| 672 | setTimeout(function() { gallery.play(); }, this.settings.delay);
|
||
| 673 | } |
||
| 674 | |||
| 675 | // Kickoff Image Preloader after 1 second |
||
| 676 | setTimeout(function() { gallery.preloadInit(); }, 1000);
|
||
| 677 | |||
| 678 | return this; |
||
| 679 | }; |
||
| 680 | })(jQuery); |
Loading history...